<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title></title>
	<style type="text/css">
		body
			{
			font-family:Helvetica;
			margin:5em 10em;
			font-size:2em;
			}
		label
			{
			-moz-user-select: none;
			display:block;
			}
		input{
			font-size:1em;
			font-weight:bold;
		}
		input.moving{
			cursor:n-resize;;
		}
	</style>
	<script type="text/javascript">
		/*
			Click
			Focus (teclado)
				Up, Down = incremente/decrementa 1 step
				+ e - = incremente/decrementa 1 step
				* e / = currentValue multiplica/divide step
			Scroll
			Esc = defaultValue
		*/		
		var Slider={
			show:function(){},
			hide:function(){},
			enabled:function(){},
			setValue:function(){},
			getValue:function(){},
			setPercentValue:function(){},
			getPercentValue:function(){},
			update:function(v){
				var o = Slider.current;
				if(v > o.max){ v=o.max;	}else if(v < o.min){ v=o.min;}
				o.value = v;
			},
			init:function(o,e){
				var s, m, n;
				if(o.nodeName.toLowerCase()=="label")o = document.getElementById(o.getAttribute("for"));
				o.start = e.clientY;
				o.step = (s=o.getAttribute("step")) ? parseFloat(s) : 1;
				o.max = (m=o.getAttribute("max")) ? parseFloat(m) : null;
				o.min = (n=o.getAttribute("min")) ? parseFloat(n) : null;
				this.current=o;
				o.className="moving";
				document.addEventListener("DOMMouseScroll",this.__scroll,false);
				document.addEventListener("mousemove",this.__move,false);
				document.addEventListener("mouseup",this.__up,false);	
				document.addEventListener("keydown",this.__key,false)			
			},
			__move:function(e){
				var o, v, c, p;
				o = Slider.current;
				p = Slider.old;
				v = parseFloat(o.value);
				c = o.start - e.clientY;
				Slider.update(c > p ? v+o.step : v-o.step);
				Slider.old = c;
			},
			__up:function(){
				Slider.current.className="";
				document.removeEventListener("mousemove",Slider.__move,false)
				document.removeEventListener("mouseup",Slider.__up,false)
			},
			__scroll:function(e){
				var o=Slider.current, v=parseFloat(o.value), s;
				Slider.update(e.detail>0 ? v-o.step : v+o.step);
			},
			__key:function(e){
				var o=Slider.current, v=parseFloat(o.value), s;
				switch(e.keyCode){
					case 38:/*up*/
					case 107:/*more*/	s = v+o.step;		break;
					case 40:/*down*/
					case 109:/*minus*/	s = v-o.step;		break;
					case 36:/*home*/	s = o.max;			break;
					case 35:/*end*/		s = o.min;			break;
					case 106:/*mul*/	s = o.step*v;		break;
					case 111:/*div*/	s = v/o.step;		break;
					default:			return false;
				}
				Slider.update(s);
				e.preventDefault();
				return false;
			}
		}

		
		
	</script>
</head>

<body>
	<label onmousedown="Slider.init(this,event)" for="f">FontSize</label>
	<input id="f" type="text" onmousedown="Slider.init(this,event)" value="0" min="0" max="100" step="2" size="5" />
</body>
</html>